GRID布局

Grid布局基于网格布局系统，其中网格由行和列组成。每个单元格可以包含一个或多个网格项目。这些项目可以指定它们在网格中所占据的行和列，以及它们的对齐方式和其他样式属性。关于Grid布局详细的图文讲解，可以查看阮一峰老师的文档：直达链接

一、创建网格容器

要创建一个Grid布局，首先需要创建一个网格容器。这可以通过设置一个元素的display属性为grid来完成，例如：

.container {
  display: grid;
}

这将创建一个默认的网格布局，其中每个单元格都具有相同的大小。要更改网格的大小和形状，可以使用grid-template-rows和grid-template-columns属性。例如：

.container {
  display: grid;
  grid-template-rows: 100px 100px;
  grid-template-columns: 1fr 2fr;
}

这将创建一个具有两行和两列的网格，第一行和第二行各有100像素高度，第一列占据总宽度的1/3，第二列占据总宽度的2/3。

二、定义网格项目

要将项目放置在网格中，可以将它们包含在网格容器中，并为它们设置grid-row和grid-column属性。例如：

<div class="container">
  <div class="item item-1">Item 1</div>
  <div class="item item-2">Item 2</div>
  <div class="item item-3">Item 3</div>
  <div class="item item-4">Item 4</div>
</div>

.item-1 {
  grid-row: 1 / 3;
  grid-column: 1 / 2;
}

.item-2 {
  grid-row: 1 / 2;
  grid-column: 2 / 3;
}

.item-3 {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
}

.item-4 {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
}

这将创建一个具有四个项目的网格，每个项目占据不同的行和列。

三、对齐网格项目

要对齐网格项目，可以使用justify-self和align-self属性。justify-self属性控制项目在其单元格中水平对齐的方式，而align-self属性控制项目在其单元格中垂直对齐的方式。例如：

.item {
  justify-self: center;
  align-self: center;
}

这将使所有项目在其单元格中居中对齐。

四、完整代码示例

下面是一个具体的示例代码和图例，它演示了如何创建一个具有四个网格项目的网格布局，并使用grid-template-rows、grid-template-columns、grid-row、grid-column、justify-self和align-self属性来调整网格的大小、形状和对齐方式。

<div class="container">
  <div class="item item-1">Item 1</div>
  <div class="item item-2">Item 2</div>
  <div class="item item-3">Item 3</div>
  <div class="item item-4">Item 4</div>
</div>

.container {
  display: grid;
  grid-template-rows: 200px 100px;
  grid-template-columns: 1fr 2fr;
  grid-gap: 20px;
  background-color: #f2f2f2;
  padding: 20px;
}

.item-1 {
  grid-row: 1 / 3;
  grid-column: 1 / 2;
  background-color: #ff6666;
  color: white;
  justify-self: center;
  align-self: center;
}

.item-2 {
  grid-row: 1 / 2;
  grid-column: 2 / 3;
  background-color: #66ccff;
  color: white;
  justify-self: end;
  align-self: center;
}

.item-3 {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
  background-color: #66ff66;
  color: white;
  justify-self: center;
  align-self: start;
}

.item-4 {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
  background-color: #ffff66;
  color: black;
  justify-self: start;
  align-self: center;
}

在这个示例中，.container类定义了网格容器，并设置了grid-template-rows和grid-template-columns属性来创建一个具有两行和两列的网格。.item类定义了四个网格项目，并使用grid-row和grid-column属性将它们放置在网格中。

每个项目也具有不同的背景颜色和文字颜色，以便更好地说明它们的位置和对齐方式。.item-1项目居中对齐，.item-2项目右对齐，.item-3项目顶部对齐，.item-4项目左对齐。

最后，.container类还设置了grid-gap属性来添加网格单元格之间的间距，以及背景颜色和内边距来突出显示网格布局。下面是示例的图例：